Синтаксис и пунктуация в CSS

ОБЯЗАТЕЛЬНОДЛЯ НОВИЧКОВ

Разработчику Аналитику Тестировщику
Архитектору Инженеру

Знаки препинания

Кавычки и запятые

Два важных вопроса, которые мучают начинающих программистов:

1. Когда использовать кавычки двойные ("), одинарные ('), а когда апострофы (’)?
2. Когда использовать точки (.), запятые (,) и точку с запятой (;)?

В CSS можно использовать оба типа кавычек в значениях, где они требуются (например, в url() или content):

background-image: url("image.jpg");
content: 'Chapter 1';

Разницы между ' и " нет , но важно соблюдать консистентность (согласованность).

Апострофы — не являются частью синтаксиса CSS, но могут встречаться в строках (например, в content).

Используйте один стиль во всем проекте для лучшей читаемости.

Точка (.) : используется для выбора классов:

.container { width: 100%; }

Запятая (,) : разделяет селекторы:

h1, h2, h3 { color: red; }

Точка с запятой (;) : обязательна после каждого свойства:

p {
  font-size: 16px;
  color: black;
}

Последнее свойство в блоке можно без точки с запятой, но лучше всегда ставить — так проще редактировать код.

---

Вендорные префиксы

Некоторые экспериментальные или недавно стандартизированные функции CSS требуют использования вендорных префиксов — специальных приставок, указывающих на принадлежность к конкретному движку браузера.

Например:

• -webkit- — для браузеров на движке WebKit (Safari, старые версии Chrome);
• -moz- — для Firefox;
• -ms- — для Internet Explorer и Edge (Legacy);
• -o- — для старых версий Opera.

Пример:

.element {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  transform: rotate(45deg);
}

Современные инструменты сборки (например, Autoprefixer) автоматически добавляют такие префиксы при необходимости, исходя из целевых браузеров проекта.

---

Комментарии в CSS

Комментарии в CSS заключаются между /* и */.

/* комментарий */

Они игнорируются браузером и служат для пояснения кода разработчикам. Комментарии могут занимать одну строку или несколько строк.

Пример:

/* Заголовок первого уровня */
h1 {
  font-weight: bold;
}

---